<template>
  <view class="dropdown-box">
    <ve-dropdown ref="dropdownRef" titleSize="24" @close="onDropdownClose">
      <ve-dropdown-item v-model:value="queryParam.payStatus" title="支付状态" :options="dict.payStatusEnum" @change="onChange" />
    </ve-dropdown>

    <view class="reset" :class="queryParam.payStatus != null ? 'reset-text' : ''" @click="onReset">
      <ve-line color="#DADBDD" direction="col" length="44" margin="0rpx 24rpx 0rpx 0rpx" />
      <text>重置</text>
    </view>
  </view>

  <scroll-view scroll-y>
    <view class="three-order-box">
      <three-order :details="details" />

      <!-- 加载结束列表为空时展示 -->
      <ve-empty v-if="details.data.length == 0" text="暂无数据" />
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
  import ThreeOrder from './three-order.vue'
  import { ref, reactive } from 'vue'
  import { usePageDict } from '@/hooks/useDict'
  import { onLoad } from '@dcloudio/uni-app'
  import useList from '@/hooks/useList'

  const props = defineProps({
    dictCode: {
      type: String,
      default: '',
    },
    orderId: {
      type: String || Number,
      default: '',
    },
    bizType: Number,
  })

  const dict = ref<any>({})

  const queryParam = reactive<any>({
    payStatus: null,
  })
  const details = reactive<any>({
    data: [],
    payedTotalAmount: 0,
    unpayTotalAmount: 0,
  })
  const { resetRefresh, loadData } = useList('/V5/thirdPaymentBill/queryByRefIdAndType', queryParam, (data: any, source: any) => {
    data.forEach((item: any) => {
      item.initExpand = true
    })
    details.data = data
    details.payedTotalAmount = source.payedTotalAmount
    details.unpayTotalAmount = source.unpayTotalAmount
  })

  const dropdownRef = ref()
  const indexList = ref<number[]>([])

  const onDropdownClose = (index: number) => {
    if (index != 99999 && queryParam.payStatus != null) {
      if (!indexList.value.includes(index)) {
        indexList.value.push(index)
      }

      dropdownRef.value.highlight(indexList.value)
    }
  }

  const onChange = (value: any) => {
    console.log('onChange', value)
    queryParam.payStatus = value
    resetRefresh()
  }

  const onReset = () => {
    queryParam.payStatus = null
    resetRefresh()
  }

  onLoad((query: any) => {
    const { businesId } = query
    queryParam.refId = Number(props.bizType) == 3 ? businesId : props.orderId
    queryParam.bizType = props.bizType

    dict.value = usePageDict(props.dictCode)
    loadData()
  })
</script>

<style lang="less" scoped>
  .three-order-box {
    padding: 24rpx 24rpx;
  }

  .dropdown-box {
    position: -webkit-sticky;
    position: sticky;
    // #ifdef APP-PLUS
    top: 0px;
    // #endif
    // #ifdef H5
    top: 44px;
    // #endif
    height: 80rpx;
    background-color: #fff;
    z-index: 1;

    :deep(.ve-dropdown) {
      padding: 0 12px;

      .ve-dropdown__menu__item {
        flex: none;
        justify-content: flex-start;
        margin-right: 15px;
      }
    }

    .reset {
      position: absolute;
      right: 12px;
      top: 0;
      bottom: 0;
      margin: auto;

      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 12px;
      color: #dadfe8;
      z-index: 12;
      image {
        width: 12px;
        height: 12px;
        margin-right: 5px;
      }
    }
    .reset-text {
      color: #3072f6;
    }
  }
</style>
